<html>
<body>

<script async src="../../build/zxing.js"></script>
<div id="scanned"></div>
<script>

var image;
var last = Date.now();
var DEBUG = 0;

var tick = function() {
	if (window.ZXing) {
		ZXing = ZXing();
		testZXing();
	} else {
		setTimeout(tick, 10);
	}
};
tick();

function log() {
	if (!DEBUG) return;
	var now = Date.now();
	var args = Array.prototype.slice.call(arguments);
	args.unshift('+' + (now - last) + 'ms');
	console.log.apply(console, args);
	last = now;
}


function testZXing() {

	// start
	var video = document.createElement('video');
	video.autoplay = true;

	navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

	var tw = 640 // 320 // 640 // 1280;
	var th = 480 // 240 // 480 // 720

	var hdConstraints = {
		audio: false,
		video: {
			mandatory: {
				maxWidth: tw,
				maxHeight: th
			}
		}
	};

	if (navigator.getUserMedia) {
		navigator.getUserMedia(hdConstraints, success, errorCallback);
	} else {
		errorCallback('');
	}

	function errorCallback(e) {
		console.log("Can't access user media", e);
	}

	function success(stream) {
		console.log('success', stream);
		video.src = window.URL.createObjectURL(stream);
		video.onclick = function() { video.play(); };
		video.play();

		var decodeCallback = function(ptr, len, resultIndex, resultCount, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
			var result = new Uint8Array(ZXing.HEAPU8.buffer, ptr, len);
			var str = String.fromCharCode.apply(null, result);
			if (resultIndex === 0) {
				window.resultString = '';
			}
			window.resultString += str + '<br>';
			ctx.fillStyle = 'red';
			ctx.fillRect(p0x-5, p0y-5, 10, 10);
			ctx.fillStyle = 'green';
			ctx.fillRect(p1x-5, p1y-5, 10, 10);
			ctx.fillStyle = 'blue';
			ctx.fillRect(p2x-5, p2y-5, 10, 10);
			ctx.fillStyle = 'purple';
			ctx.fillRect(p3x-5, p3y-5, 10, 10);
		};
		var decodePtr = ZXing.Runtime.addFunction(decodeCallback);

		function getFrame() {
			requestAnimationFrame(getFrame);

			if (!video.videoWidth) return;

			if (!image) {
				width = video.videoWidth, height = video.videoHeight;
				log('video', width, height, video);

				var canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				canvas.style.transform = 'scale(-1, 1)';

				ctx = canvas.getContext('2d');
				document.body.appendChild(canvas);

				log('start');

				image = ZXing._resize(width, height);
				log('_xsetup', image, 'pointer');
				return;
			}

			log('interval')
			console.time('a')
			ctx.drawImage(video, 0, 0, width, height);
			var imageData = ctx.getImageData(0,0, width, height);
			data = imageData.data;

			for (var i=0, j=0; i<data.length; i+=4, j++) {
				// ZXing.HEAPU8[image + j] = data[i];
				ZXing.HEAPU8[image + j] = 0.2989 * data[i + 0] + 0.5870 * data[i + 1] + 0.1140 * data[i + 2] ;
			}

			var err = ZXing._decode_qr_multi(decodePtr);
			// err = ZXing._decode_any();
			// err = ZXing._decode_multi();

			// console.log("error code", err);
			// console.log("result", window.resultString);

			var r = err ? ("error: "+err) : window.resultString;
			scanned.innerHTML = r


			console.timeEnd('a')
		}

		getFrame();

	};
};
</script>

</body>
</html>